<template>
  <div class="main">
    <ul>
      <li>
        <span>姓名</span>
        <input
          v-if="!userInfo.realName"
          type="text"
          placeholder="请填写"
          placeholder-style="color:#B8BAB9"
          v-model="name"
        />
        <input v-else type="text" v-model="name" placeholder-style="color:#B8BAB9" disabled />
      </li>
      <li style="padding:25px 0">
        <span>证件类型</span>
        <div class="choice" @click="choiceType">
          <input
            type="text"
            placeholder-style="color:#B8BAB9"
            placeholder="请选择"
            v-model="idType"
            disabled
          />
          <img
            v-if="!userInfo.realName"
            src="/static/images/index/choice.png"
            alt
            style="width:10px;height:14px;margin-left:6px"
          />
        </div>
      </li>
      <li class="borderBtm">
        <span>证件号</span>
        <input
          placeholder-style="color:#B8BAB9"
          v-if="!userInfo.realName"
          type="text"
          maxlength="19"
          placeholder="请填写"
          v-model="number"
        />
        <input v-else placeholder-style="color:#B8BAB9" type="text" v-model="number" disabled />
      </li>
    </ul>
    <div class="bottom" v-if="!userInfo.realName">
      <button @click="goEvaluation">提交</button>
    </div>
  </div>
</template>

<script>
import { submitCustomer, showCustomer } from '@/api/api';
import { mapGetters } from 'vuex';
export default {
  props: {},
  data () {
    return {
      name: '',
      idType: '',
      number: '',
      activeIndex: ''
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {},
  mounted () {
    console.log(this.userInfo, 'rrrrrrrr');
    let utils = require('@/utils/idCard.js');
    this.validateIdCard = utils.default.validateIdCard;
    this.checkPassport = utils.default.checkPassport;
    this.userInfo.realName && this.showCustomer();
  },
  watch: {},
  methods: {
    // 获取实名认证填写的信息
    async showCustomer () {
      await showCustomer().then(res => {
        console.log('获取实名', res);
        this.name = res.customerName;
        if (res.documentType === 'IDENTITY_CARD') {
          this.idType = '身份证';
        }
        if (res.documentType === 'PASSPORT') {
          this.idType = '护照';
        }
        this.number = res.certificateNumber;
      });
    },
    // 提交实名认证信息请求接口
    async verified () {
      const data = {
        customerName: this.name,
        documentType: this.idType === '护照' ? 'PASSPORT' : 'IDENTITY_CARD',
        certificateNumber: this.number
      };
      await submitCustomer(data).then(res => {
        if (res === '') {
          this.$store.commit('userFun');
          wx.navigateTo({
            url:
              '/pages/PersonalCenter/userChildren/evaluation/startEvaluation/main'
          });
        }

        console.log('实名认证', data, res);
      });
    },
    // 选择证件类型
    choiceType () {
      const that = this;
      wx.showActionSheet({
        itemList: ['身份证', '护照'],
        success (res) {
          that.activeIndex = res.tapIndex;
          // console.log('res.tapIndex', that.activeIndex);
          if (res.tapIndex === 0) {
            that.idType = '身份证';
          } else {
            that.idType = '护照';
          }
        },
        fail (res) {
          console.log(res.errMsg);
        }
      });
    },
    // 跳到风险测评页面
    goEvaluation () {
      if (this.name === '') {
        wx.showToast({
          title: '请填写姓名！',
          icon: 'none',
          duration: 2000
        });
      } else {
        if (this.idType === '') {
          wx.showToast({
            title: '请选择证件类型！',
            icon: 'none',
            duration: 2000
          });
        } else {
          if (this.number === '') {
            wx.showToast({
              title: '请填写证件号！',
              icon: 'none',
              duration: 2000
            });
          } else {
            // console.log(this.activeIndex);
            if (this.activeIndex === 0) {
              this.validateIdCard(this.number);
            } else {
              this.checkPassport(this.number);
            }
          }
        }
      }
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
ul {
  // height: 110px;
  margin: 0 15px;
  padding-top: 31px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .borderBtm {
    padding-bottom: 25px;
    border-bottom: 1px solid #e6e6e6ff;
  }
  li {
    display: flex;
    justify-content: space-between;
    span {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 400;
      color: rgba(2, 6, 4, 1);
      line-height: 20px;
    }
    input {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 400;
      color: #020604;
      line-height: 20px;
      text-align: right;
    }
    .choice {
      display: flex;
      justify-content: center;
      align-items: center;
      // input {
      //   margin-right: 6px;
      // }
    }
  }
}
.bottom {
  position: fixed;
  bottom: 6px;
  padding-top: 6px;
  border-top: 0.5px solid #e6e6e6;
  width: 100%;
  button {
    border-radius: 2px;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFangSC;
    font-weight: 500;
    line-height: 42px;
    margin: 0 15px;
    background: rgba(24, 119, 152, 1);
    color: rgba(255, 255, 255, 1);
  }
}
</style>
